import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import Button from 'antd/es/button/button';
import 'antd/es/button/style/index.css';
import InputNumber from 'antd/es/input-number/index';
import 'antd/es/input-number/style/index.css';
import Drawer from 'antd/es/drawer/index';
import 'antd/es/drawer/style/index.css';
import './index.scss';
import { inject } from '../../utils';
import { GLOBAL_LIST_PARAM } from '../../utils/const';
import { sendMessageRuntime, sendMessageTabs } from '../../utils/message';
inject.injectHTML('', 'chrome-app');//创建等下需要挂载的节点

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  console.log(sender,request);
  sendResponse('我收到了你的消息！');
});

sendMessageRuntime({ name: '测试一下文字啊！' });//向后台发送消息

var port = chrome.runtime.connect({ name: GLOBAL_LIST_PARAM.connect.seconed });//通道名称

const App: React.FC = () => {
  const [visible, setVisible] = useState(false);
  const [imgSrc, setImgSrc] = useState('https://www.baidu.com/');
  useEffect(() => {
    port.onMessage.addListener(function (msg) {
      setImgSrc(msg.capture)
    })
  }, []);
  const showDrawer = () => {
    port.postMessage({ name: true });
    setVisible(true);
  };
  const onClose = () => {
    setVisible(false);
  };
  return (
    <>
      缩放到<InputNumber min="10" max="900" defaultValue="714" />px
      <a href={imgSrc} download="我的截图">下载图片</a>
      <Button type="primary" onClick={showDrawer}>
        打开面板
      </Button>
      {/* <Drawer
        title="底部弹出框"
        placement="bottom"
        closable={false}
        onClose={onClose}
        visible={visible}
      >
        <p>内容1</p>
        <p>内容2</p>
        <p>内容3</p>
      </Drawer> */}
    </>
  );
};
ReactDOM.render(<App />, document.body.getElementsByClassName('chrome-app')[0])
